<header>
  <nav
    class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"
  >
    <div class="container">
      <a class="navbar-brand" [routerLink]="['/']">LiveChat</a>
      <div
        class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"
        [ngClass]="{ show: isExpanded }">
        <ul class="navbar-nav flex-grow">
          <ng-template [ngIf]="isConnected">
            <li class="nav-item" [routerLinkActive]="['link-active']">
              <a class="nav-link text-dark" (click)="disconnect()"></a>
            </li>
          </ng-template>          
        </ul>
      </div>
    </div>
  </nav>
</header>
